// 定义商品类型
interface Info {
  id: number;
  name: string;
  unitPrice: number;
  quantity: number;
  subtotal: number;
  isChecked: boolean;
}

// 初始化商品数据
const data: Info[] = [
  {
    id: 1,
    name: "笔记本",
    unitPrice: 20,
    quantity: 0,
    subtotal: 0,
    isChecked: false,
  },
  {
    id: 2,
    name: "电视",
    unitPrice: 10,
    quantity: 0,
    subtotal: 0,
    isChecked: false,
  },
  {
    id: 3,
    name: "智能电冰箱",
    unitPrice: 30,
    quantity: 0,
    subtotal: 0,
    isChecked: false,
  },
];

// 定义是否全选的状态
const isArrCheckbox: boolean = false;

// 渲染表格
function render(): void {
  let html: string = "";
  for (let i = 0; i < data.length; i++) {
    html += `
        <tr class='itr' onmouseover='sbHover(${i})' onmouseout='sbOut(${i})'>
          <td><input type="checkbox" onchange='check(${i})' ${
      data[i].isChecked ? "checked" : ""
    } class='check'></td>
          <td>${data[i].id}</td>
          <td>${data[i].name}</td>
          <td>${data[i].unitPrice.toFixed(2)}</td>
          <td class="quantity">
            <button onclick='add(${i})'>-</button>
            <input type="text" class='shuNum' onchange='num(${i})' value="${
      data[i].quantity
    }">
            <button onclick='add(${i})'>+</button>
          </td>
          <td>${data[i].subtotal.toFixed(2)}</td>
          <td><button onclick='dele(${i})'>删除</button></td>
        </tr>
      `;
  }
  document.querySelector("tbody")!.innerHTML = html;
  document.querySelector("#changeAll")!.checked = isArrCheckbox;
}

// 渲染初始表格
render();

// 全选反选事件处理
document.querySelector("#changeAll")!.addEventListener("change", function () {
  isArrCheckbox = !isArrCheckbox;
  for (let i = 0; i < data.length; i++) {
    data[i].isChecked = isArrCheckbox;
  }
  render();
});

// 单选事件处理
function check(id: number): void {
  data[id].isChecked = !data[id].isChecked;
  let isArr: boolean = true;
  for (let i = 0; i < data.length; i++) {
    if (!data[i].isChecked) {
      isArr = false;
      break;
    }
  }
  isArrCheckbox = isArr;
  render();
}

// 加号事件处理
function add(id: number): void {
  if (data[id].quantity < 10000) {
    // 假设数量有上限
    data[id].quantity++;
    data[id].subtotal = data[id].quantity * data[id].unitPrice;
    addNum();
  }
  render();
}

// 减号事件处理
function jian(id: number): void {
  if (data[id].quantity > 0) {
    data[id].quantity--;
    data[id].subtotal = data[id].quantity * data[id].unitPrice;
    addNum();
  }
  render();
}

// 删除事件处理
function dele(id: number): void {
  data.splice(id, 1);
  addNum();
  render();
}

// 输入框控制数量功能
function num(id: number): void {
  const inputElement: HTMLInputElement | null = document.querySelector(
    `.shuNum:nth-of-type(${id + 1})`
  );
  if (inputElement) {
    const quantity: number = parseInt(inputElement.value, 10);
    if (quantity >= 0) {
      data[id].quantity = quantity;
      data[id].subtotal = data[id].quantity * data[id].unitPrice;
      addNum();
    }
  }
  render();
}

// 计算总价
function addNum(): void {
  let price: number = 0;
  for (let i = 0; i < data.length; i++) {
    price += data[i].subtotal;
  }
  document.querySelector("#price")!.textContent = "￥" + price.toFixed(2);
}

// 鼠标悬停事件处理
function sbHover(id: number): void {
  const trs: HTMLElement | null = document.querySelectorAll(".itr")[
    id
  ] as HTMLElement;
  if (trs) {
    trs.className = "itr color";
  }
}

// 鼠标移出事件处理
function sbOut(id: number): void {
  const trs: HTMLElement | null = document.querySelectorAll(".itr")[
    id
  ] as HTMLElement;
  if (trs) {
    trs.className = "itr";
  }
}
